<template>
  <div class="space-page">
    <!-- 顶部操作栏 -->
    <div class="header-section">
      <a-flex justify="space-between" align="center">
        <div class="title-section">
          <h1 class="page-title">空间管理</h1>
          <a-progress
            v-if="spaceId"
            type="circle"
            :size="50"
            :percent="((space?.totalSize || 0) * 100) / (space?.maxSize || 1)"
            :format="(percent) => `${percent?.toFixed(1)}%`"
            class="storage-progress"
          />
        </div>
        <a-space>
          <a-space v-if="spaceId">
            <a-button
              type="primary"
              :href="`/space/analysis?spaceId=${spaceId}`"
              :icon="h(BarChartOutlined)"
              v-if="canManage"
            >
              空间分析
            </a-button>
            <a-button
              v-if="canUploadPicture"
              type="primary"
              :href="`/picture/add?spaceId=${spaceId}`"
              :icon="h(UploadOutlined)"
            >
              上传图片
            </a-button>
            <a-button
              type="primary"
              :href="`/admin/space-manage-user/${spaceId}`"
              :icon="h(EditOutlined)"
              v-if="canManage"
            >
              管理成员
            </a-button>
            <a-button
              v-if="canEditPicture"
              @click="openEditModal"
              type="primary"
              :icon="h(EditOutlined)"
            >
              批量修改
            </a-button>
          </a-space>
          <a-button v-else type="primary" @click="router.push('/space/add')"> 创建空间 </a-button>
        </a-space>
      </a-flex>
    </div>

    <!-- 搜索区域 -->
    <div class="search-section" >
      <PictureSearchForm  v-model="params" :on-reload="onSearch" :on-clear="clearParams" />
      <div class="color-search">
        <span class="color-label">颜色筛选：</span>
        <color-picker format="hex" @pureColorChange="onColorSearch" class="color-picker" />
      </div>
    </div>

    <!-- 图片列表区域 -->
    <div class="content-section">
      <ImageList
        :picture-list="pictureList"
        :loading="loading"
        :show-op="true"
        :can-delete="canDeletePicture"
        :can-edit="canEditPicture"
        :on-reload="getPictureList"
      />
      <div class="pagination-wrapper">
        <a-pagination
          v-model:current="params.current"
          :total="total"
          :pageSize="params.pageSize"
          @change="onSearch"
          :page-size-options="['12', '15', '20']"
          show-size-changer
          show-quick-jumper
        />
      </div>
    </div>

    <PictureEditBatchModal
      ref="editModalRef"
      :picture-ids="selectedIdList"
      :space-id="space.id"
      :on-success="getPictureList"
    />
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { computed, h, onMounted, ref } from 'vue'
import {
  listPictureVoByPageUsingPost,
  searchPictureByColorUsingPost,
} from '@/api/pictureController.ts'
import ImageList from '@/components/image/ImageList.vue'
import PictureSearchForm from '@/views/picture/PictureSearchForm.vue'
import { ColorPicker } from 'vue3-colorpicker'
import 'vue3-colorpicker/style.css'
import PictureEditBatchModal from '@/views/picture/PictureEditBatchModal.vue'
import { BarChartOutlined, EditOutlined, UploadOutlined } from '@ant-design/icons-vue'
import { useRoute } from 'vue-router'
import { getSpaceVoByIdUsingGet } from '@/api/spaceController.ts'
import { SPACE_PERMISSION_ENUM } from '@/constants/space.ts'

const route = useRoute()
//检验权限

// 获取空间信息
const space = ref<API.SpaceVO>({})
const getSpace = async () => {
  const res = await getSpaceVoByIdUsingGet({ id: spaceId.value })
  if (res.data.code !== 0) {
    return
  }
  space.value = res.data.data
}

// 权限获取
function getPermission(permission: string) {
  return computed(() => {
    return (space.value.permissionList ?? [])?.includes(permission)
  })
}

const canUploadPicture = getPermission(SPACE_PERMISSION_ENUM.PICTURE_UPLOAD)
const canEditPicture = getPermission(SPACE_PERMISSION_ENUM.PICTURE_EDIT)
const canDeletePicture = getPermission(SPACE_PERMISSION_ENUM.PICTURE_DELETE)
const canViewPicture = getPermission(SPACE_PERMISSION_ENUM.PICTURE_VIEW)
const canManage = getPermission(SPACE_PERMISSION_ENUM.SPACE_USER_MANAGE)
// 获取修改图片的idList
const selectedIdList = computed(() => {
  return pictureList.value.filter((item) => item).map((item) => item.id)
})

// 打开修改框
const editModalRef = ref()
const openEditModal = () => {
  editModalRef.value.openModal()
}
// 清空参数
const clearParams = () => {
  params.value = {
    current: 1,
    pageSize: 12,
    sortField: 'update_time',
    sortOrder: 'descend',
  }
}

const params = ref<API.listPictureByPageUsingGETParams>({
  current: 1,
  pageSize: 12,
  sortField: 'update_time',
  sortOrder: 'descend',
})
const total = ref(0)
// 获取图片列表信息
const pictureList = ref<API.PictureVO[]>([])
const loading = ref(false)
const spaceId = computed(() => {
  return route.params.id
})
const getPictureList = async () => {
  loading.value = true
  console.log(space.value)

  const res = await listPictureVoByPageUsingPost({
    ...params.value,
    spaceId: spaceId.value,
  })
  if (res.data.code !== 0) {
    return
  }
  pictureList.value = res.data.data.records
  total.value = res.data.data.total
  loading.value = false
}

// 查询
const onSearch = (page: number, pageSize: number) => {
  params.value.current = page
  params.value.pageSize = pageSize
  getPictureList()
}

// 通过颜色搜索图片
const onColorSearch = async (color: string) => {
  console.log(color)
  const res = await searchPictureByColorUsingPost({
    picColor: color,
    spaceId: spaceId.value,
  })
  if (res.data.code === 0 && res.data.data) {
    pictureList.value = res.data.data
  }
}

onMounted(() => {
  getPictureList()
  getSpace()
})
</script>

<style scoped lang="scss">
.space-page {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;

  .header-section {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;

    .title-section {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;

      .page-title {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #1f1f1f;
      }

      .storage-progress {
        :deep(.ant-progress-text) {
          font-size: 12px;
        }
      }
    }

    :deep(.ant-space) {
      flex-wrap: wrap;
      gap: 8px !important;
    }
  }

  .search-section {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;

    .color-search {
      margin-top: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;

      .color-label {
        color: #666;
        font-size: 14px;
      }

      .color-picker {
        :deep(.vc-color-wrap) {
          width: 32px;
          height: 32px;
          border-radius: 4px;
        }
      }
    }
  }

  .content-section {
    background: #fff;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    .pagination-wrapper {
      margin-top: 24px;
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
  }
}

// 响应式优化
@media screen and (max-width: 768px) {
  .space-page {
    padding: 12px;

    .header-section {
      padding: 16px;

      .title-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      :deep(.ant-space) {
        width: 100%;
        justify-content: flex-start;
      }

      :deep(.ant-btn) {
        width: 100%;
        margin-bottom: 8px;
      }
    }

    .search-section {
      padding: 16px;

      .color-search {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .content-section {
      padding: 16px;

      .pagination-wrapper {
        justify-content: center;
      }
    }
  }
}

// 平板设备优化
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .space-page {
    padding: 16px;

    .header-section {
      padding: 20px;

      :deep(.ant-space) {
        gap: 12px !important;
      }
    }

    .search-section,
    .content-section {
      padding: 20px;
    }
  }
}

// 大屏幕优化
@media screen and (min-width: 1025px) {
  .space-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px;

    .header-section {
      padding: 32px;

      :deep(.ant-space) {
        gap: 16px !important;
      }
    }

    .search-section,
    .content-section {
      padding: 32px;
    }
  }
}
</style>
